<template>
  <basic-container>
    <el-row>
      <el-col :span="4">
        <el-tabs type="border-card">
          <el-tab-pane label="库存中心" class="informationLabel">
            <avue-tree class="treeList" :option="treeOption" :data="treeData" @node-click="nodeClick" highlight-current="true" ref="treeProperties"> </avue-tree>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="20">
        <div style="margin-left: 10px">
          <el-tabs type="border-card" style="margin-bottom: 20px">
            <el-tab-pane label="物料存储查询" class="informationLabel">
              <avue-form ref="form" :option="headerFormOption" v-model="headerForm">
                <template slot-scope="{ size }" slot="menuForm">
                  <el-button type="primary" icon="el-icon-search" :size="size" @click="searchChange">搜索</el-button>
                  <el-button :size="size" icon="el-icon-delete" @click="searchReset">清空</el-button>
                </template>
              </avue-form>
            </el-tab-pane>
          </el-tabs>
          <el-tabs type="border-card">
            <el-tab-pane label="物料存储配置" class="informationLabel">
              <avue-crud
                :option="option"
                :table-loading="loading"
                :data="data"
                :page.sync="page"
                :before-open="beforeOpen"
                ref="crud"
                @current-change="currentChange"
                @size-change="sizeChange"
              >
                <template slot="menuLeft">
                  <div>
                    <el-button
                      v-if="permission.material_storage_management_import"
                      :disabled="!isSelectLevel"
                      type="success"
                      size="small"
                      icon="el-icon-upload2"
                      @click="handleImport"
                    >
                      导入
                    </el-button>
                    <span v-if="isSelectLevel" class="default-message">物料存储等级:L{{ this.selectTreeItem.materialStorageLevel }}</span>
                    <span v-else class="error-message">请到仓库配置中配置物料存储等级</span>
                  </div>
                </template>
                <template slot="menuRight">
                  <user-table-config :option="option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>
                </template>
                <template slot="menu" slot-scope="{ row }">
                  <el-button type="text" v-if="permission.material_storage_management_view" icon="el-icon-edit" size="small" @click="handleView(row)">详情</el-button>
                  <el-button
                    type="text"
                    v-if="permission.material_storage_management_catagory_config"
                    icon="el-icon-delete"
                    size="small"
                    @click="handleMartialCategoryConfig(row)"
                    >物料类配置</el-button
                  >
                  <el-button
                    v-if="permission.material_storage_management_martial_config"
                    type="text"
                    icon="el-icon-printer"
                    size="small"
                    :disabled="!row.partCategoryNames"
                    @click="handleMartialConfig(row)"
                    >物料配置</el-button
                  >
                </template>
              </avue-crud>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <dialog-form :visibile.sync="visibile" :type="type" @onConfirm="handleConfirm" :row-data="rowData"></dialog-form>
    <material-storage-import
      :visible.sync="importConfig.show"
      @submit="getData"
      :id="selectTreeItem.materialStorageLevel"
      :inventory-id="selectTreeItem.id"
    ></material-storage-import>
    <global-modal-template :visibile.sync="dialogVisibile" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </global-modal-template>
  </basic-container>
</template>

<script>
import { getAreaTree, getInventoryList } from '@/api/admin/storage';
import { setSearchOption, tableOption } from '@/views/warehouse/productrefactor/materialStorageManagement';
import { mapGetters } from 'vuex';
import dialogForm from '../components/dialogForm';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';
import materialStorageImport from '@/views/warehouse/components/materialStorageImport';
import globalModalTemplate from '@/components/common-modal-template/global-modal-template';
import { getList } from '@/api/warehouse/materialStorageManagement';
export default {
  name: 'materialStorageManagement',
  components: {
    dialogForm,
    userTableConfig,
    globalModalTemplate,
    materialStorageImport
  },
  mixins: [userConfig()],
  data() {
    return {
      visibile: false,
      rowData: {},
      dialogVisibile: false,
      timer: new Date().getTime(),
      tableOption: {},
      treeData: [],
      importConfig: {
        show: false
      },
      treeOption: {
        nodeKey: 'id',
        lazy: true,
        menu: false,
        filter: false,
        size: 'small',
        props: {
          label: 'name'
        }
      },
      loading: false,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 1
      },
      type: '',
      data: [],
      option: tableOption,
      headerFormOption: setSearchOption(this),
      headerForm: {},
      selectTreeItem: {}
    };
  },
  mounted() {
    this.initTree();
  },
  computed: {
    ...mapGetters(['permission']),
    isSelectLevel() {
      return Object.keys(this.selectTreeItem).length && this.selectTreeItem.materialStorageLevel;
    }
  },
  methods: {
    async initTree(id) {
      this.treeData = [];
      try {
        const res = await getList({ level: 1, current: 1, size: 10000, areaType: 'WAREHOUSE' });
        const data = res.data.data;
        this.treeData = data.records;
      } catch (e) {
        console.warn(e);
      }
    },
    async nodeClick(node) {
      this.selectTreeItem = node;
      if (!node.materialStorageLevel) {
        this.data = [];
        return;
      }
      try {
        this.loading = true;
        const params = {
          level: this.selectTreeItem.materialStorageLevel,
          current: this.page.currentPage,
          size: this.page.pageSize
        };
        if (node.materialStorageLevel === 1) {
          params.id = this.selectTreeItem.id;
        } else {
          params.inventoryId = this.selectTreeItem.id;
        }
        //   inventoryId: this.selectTreeItem.id,
        const res = await getList(params);
        const data = res.data.data;
        this.data = data.records;
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    },
    searchReset() {
      this.$refs.form.resetForm();
      if (!Object.keys(this.selectTreeItem).length) {
        return;
      }
      if (!this.selectTreeItem.materialStorageLevel) {
        return;
      }
      this.page.currentPage = 1;
      this.getData();
    },
    searchChange() {
      if (!Object.keys(this.selectTreeItem).length) {
        this.$message.warning('请先选择仓库后再进行搜索');
        return;
      }
      if (!this.selectTreeItem.materialStorageLevel) {
        this.$message.warning('请到仓库配置中配置物料存储等级');
        return;
      }
      this.page.currentPage = 1;
      this.getData();
    },
    async getData() {
      try {
        this.loading = true;
        const params = this.getSearchParams();
        const res = await getList({ size: this.page.pageSize, current: this.page.currentPage, ...params });
        const data = res.data.data;
        this.data = data.records;
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    },
    getSearchParams() {
      const { name = '', code = '', partMasterIds = '', categoryNames = '' } = this.headerForm;
      const obj = { name, code, partMasterIds, categoryNames, level: this.selectTreeItem.materialStorageLevel };
      if (this.selectTreeItem.materialStorageLevel === 1) {
        obj.id = this.selectTreeItem.id;
      } else {
        obj.inventoryId = this.selectTreeItem.id;
      }
      return obj;
    },
    beforeOpen() {},
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getData();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getData();
    },
    codeClose(value) {
      if (value) {
        this.reload();
      }
    },
    treeLoadData() {},
    handleMartialConfig(row) {
      this.type = 'material';
      this.rowData = row;
      this.visibileChange();
    },
    handleMartialCategoryConfig(row) {
      this.type = 'detailCategory';
      this.rowData = row;
      this.visibileChange();
    },
    handleView(row) {
      this.type = 'detail';
      this.rowData = row;
      this.visibileChange();
    },
    visibileChange() {
      this.visibile = true;
    },
    handleConfirm(form) {
      this.visibile = false;
      this.getData();
    },
    // 重新加载公用表格弹窗组件
    newKey() {
      this.timer = new Date().getTime();
    },
    handleImport() {
      this.importConfig.show = true;
    },
    openMaterialModel() {
      this.modalName = 'MaterialModel';
      this.dialogVisibile = true;
      this.tableOption = {
        modalTitle: '添加物料信息',
        url: '/api/mes-admin/part-master/page',
        isPage: true,
        rowSelectionType: 'multiple',
        menuWidth: 100,
        templateName: 'PARTMASTER'
      };
    },
    getSelectedRows(rowData) {
      this.headerForm.partMasterIds = rowData.map((i) => i.id).toString();
      this.headerForm.categoryNames = rowData.map((i) => i.name).toString();
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-tabs__item {
  color: #606266 !important;
  font-weight: bold;
}
::v-deep .el-card__body {
  padding: 10px;
}
::v-deep .el-card .is-never-shadow {
  padding: 0;
}

.treeList {
  height: calc(100vh - 226px);
  border-top: 1px solid #cccccc;
}
::v-deep .el-tree-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 30px;
  cursor: pointer;
  border: 1px solid #cccccc;
  border-top: none;
  &:hover {
    background: #c8ecfc;
  }
}

.error-message {
  color: red;
  font-size: 12px;
  display: block;
  margin-top: 8px;
}
.default-message {
  color: #606266;
  font-size: 12px;
  display: block;
  margin-top: 8px;
}
::v-deep .avue-tree__content {
  padding: 0;
}

::v-deep .el-tree-node__label {
  margin-left: 12px;
}
::v-deep .el-icon-caret-right {
  display: none;
  &::before {
    content: '';
  }
}
::v-deep .avue-crud__menu {
  min-height: 60px;
}
</style>
